<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
	<style type="text/css">
		.logs-detail{
		  width: 1010px;
		  margin: 0 auto;
		  overflow: auto;
		}
		.logs-detail div{
		  width:335px;
		  float:left;
		}
		.logs-detail ul {
		  list-style-type: none;
		  padding:0px;
		  padding:0px;
		  margin:5px 0px;
		}
		.logs-detail ul li{
			line-height: 24px;
			border: 1px dotted #ccc;
			font-size: 12px;
			margin:0px 10px 5px 0px;//top right bottom left
		}
		
		#opt a,
		#opt a:hover {
			margin:0px 1px;
			color: #66f;
			width:25px;
			//border:1px solid #ccc;
			text-decoration:none;
			border-style:none;
		}
		#opt a:hover{
			color: #f00;
		}
	</style>
	<script type="text/javascript">
		function formatColumn(colName,value,row,index) {
		    return eval("row."+colName);
		}
		
		//查询、添加、修改、删除
		function query(){
		   $('#mydatagrid').datagrid('load',{
			   rfid:$("#rfid").val()
		   });
	   }
		
		var url;
		function newDialog(){
			$('#dlg').dialog('open').dialog('setTitle','创建房间信息');
			$("#fm").form('clear');
			$('#btn1').linkbutton({//创建linkbutton
			    iconCls:'icon-ok',
			    text:'保存'
			});
			url='<%=basePath%>asset/add.action';
		}
		
		function editor(){
			var row=$('#mydatagrid').datagrid("getSelected");
			if(row){
				$('#dlg').dialog('open').dialog('setTitle','修改楼宇信息');
				$('#fm').form('load',row);
				$("#roomSelect").find("option[value=\'"+eval('row.room.rid')+"\']").attr("selected",true);
				$('#btn1').linkbutton({//创建linkbutton
				    iconCls:'icon-ok',
				    text:'修改'
				});
				url='<%=basePath%>asset/update.action';
			}
		}
		
		//datagrid双击事件，同editor功能
		$(function(){
			$('#mydatagrid').datagrid({
				onDblClickRow:function(rowIndex,rowData){
					//alert(rowData.supplierId);
					$('#dlg').dialog('open').dialog('setTitle','修改资产信息');
					$('#fm').form('load',rowData);
					$("#roomSelect").find("option[value=\'"+eval('rowData.room.rid')+"\']").attr("selected",true);
					$('#btn1').linkbutton({//创建linkbutton
					    iconCls:'icon-ok',
					    text:'修改'
					});
					url='<%=basePath%>asset/update.action';
				}
			});
		});
		
		function save(){
			$('#fm').form('submit',{
				url:url,
				onSubmit:function(){
					// 做某些检查 ,返回 false 来阻止提交
				},
				success:function(result){
					var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title:'错误信息',
                            msg:result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#mydatagrid').datagrid('reload');    // reload the user data
                    }
				}
			});
		}
		
		
		function del(){
			   var row=$('#mydatagrid').datagrid("getSelected");
			   if(row){
				   $.messager.confirm('消息','您确定要删除资产\''+row.assetId+'\'吗?',function(r) {
						if (r) {
							$.ajax({
								url:"<%=basePath%>asset_del/"+row.assetId+".action",
								type:'get',
								timeout:5000,
								success:function(data) {
									$.messager.alert('消息',data);
									$('#mydatagrid').datagrid('reload');
								}
							});
						} 
					});
			   }else{
				   $.messager.show({
					   title:'提示信息',
					   msg:'请选择一项要删除的内容！！！'
				   });
			   }
		}
	</script>
</head>
<body>
    <div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询"  data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<td>RFID</td>
						<td><input id="rfid" class="easyui-validatebox" 
							style="width:120px">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="房间信息管理列表" style="width:1060px;height:480px"
	            data-options="singleSelect:true,	            
	            url:'<%=basePath%>/asset/getPageList.action',
	            collapsible:true,
	            rownumbers:true,
	            toolbar:'#toolbar',
	            fitColumns:true,
	            //sortName:'creatTime',
	            //sortOrder:'desc',
	            noheader:false, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'assetId'">
		        <thead>
		            <tr>
		            	<th data-options="field:'room.building',width:60,sortable:true" formatter="(function(v,r,i){return formatColumn('room.building.name',v,r,i);})">所在楼宇</th>
		            	<th data-options="field:'room',width:60,sortable:true" formatter="(function(v,r,i){return formatColumn('room.name',v,r,i);})">所在房间</th>
		                <th data-options="field:'assetId',width:100,sortable:true">资产编号</th>
		                <th data-options="field:'rfid',width:120,sortable:true">RFID编号</th>
		                <th data-options="field:'price',width:100,sortable:true">资产价格</th>	
		                <th data-options="field:'state',width:110,sortable:true">资产状态</th>
		            </tr>
		        </thead>
		    </table>
		    <div id="toolbar">
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newDialog()">添加</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editor()">修改</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
		   	</div>
		   	<!-- 添加面板区域 -->
		   	<div id="dlg" class="easyui-dialog" title="添加资产信息" style="width:550px;height:320px;padding:10px 20px"
		   		 data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#dlg-buttons',cache:false">
		   		<div class="ftitle">创建资产信息</div>
		   		<form:form id="fm" action="" method="post" commandName="asset">
				<table>
					<tr>
						<td><form:label path="assetId">资产编号</form:label></td>
						<td><form:input path="assetId"/></td>
						<td><form:label path="rfid">RFID</form:label></td>
						<td><form:input path="rfid"/></td>
					</tr>
					<tr>
						<td><form:label path="price">资产价格</form:label></td>
						<td><form:input path="price"/></td>
						<td><form:label path="state">资产状态</form:label></td>
						<td><form:input path="state"/></td>
					</tr>
					<tr>
						<td><form:label path="Room.rid">所在房间</form:label></td>
						<td colspan="3"><form:select id="roomSelect" path="Room.rid" items="${roomList}"/></td>
					</tr>
				</table>
				</form:form>
		   	</div>
		   	<div id="dlg-buttons">
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()" id="btn1">保存</a>
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
		   	</div>
	    </div>
	</div>
</body>
</html>